<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3-2-栅格系统</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">
	.row div{
		border:1px solid red;
	}
	.container{
		border:1px dotted black;
	}

</style>
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="col-lg-4 col-md-offset-6 col-md-2 col-sm-3 ">
				<img src="images/1.jpg" alt="">
			</div>

			<div class=" col-lg-4 col-md-2 col-sm-3">
				<img src="images/2.jpg" alt="">
			</div>

			<div class="col-lg-4 col-md-2 col-sm-6">
				<img src="images/3.jpg" alt="">
			</div>

		</div>
	</div>

<br><hr>


<div class="container-fluid">
  <h1>偏移列</h1>
  <div class="container-fluid">
	    <div class="row">
	      <div class="col-md-4 bg-success">.col-md-4</div>
	      <div class="col-md-4 col-md-offset-4 bg-warning">.col-md-4 .offset-md-4</div>
	    </div>

	    <div class="row">
	      <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div>
	      <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div>
	    </div>

	    <div class="row">
	      <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div>
	    </div>

  </div>
</div>






<br><br><br><br><br>
<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>